<template>
  <div class="playmv">
    <!-- 布局 -->

    <video :src="mvUrl" height="240" controls></video>
    <div>{{ mvDetail.name }}</div>
    <div class="title">相关视频</div>

    <RVideo
      v-for="item in relatedList"
      :key="item.vid"
      :items="item"
      @getFather="getf"
    ></RVideo>

    <div class="foot">
      <button>分享给好友</button>
    </div>
  </div>
</template>

<script>
import { getMvUrl, playDetail, relatedMV } from "@/http/api/playmv.js";
import RVideo from "../components/playMv/RVideo.vue";
export default {
  data() {
    return {
      mvUrl: "",
      mvDetail: "",
      relatedList: [],
    };
  },
  components: {
    RVideo,
  },
  //(1)根据这个id=>发送请求=》获取mv相关信息
  created() {
    //(1)获取路由参数
    // console.log(this.$route.query);
    //获取本地数据
    if (sessionStorage.getItem("ids")) {
      //13如果有数据，说明是相关的视频播放页面
      this.getf(sessionStorage.getItem("ids"));
    } else {
      //不是
      //(2)发送请求
      this.getmv(this.$route.query.id);
      this.getPlayD(this.$route.query.id);
      this.getrelatedMV(this.$route.query.id);
    }
  },
  destroyed() {
    //清除本地存放数据
    sessionStorage.setItem("ids", "");
  },
  methods: {
    //子组件给父组件传递的数据
    getf(id) {
      //存放相关数据
      sessionStorage.setItem("ids", id);
      console.log(id, "父组件");
      //发送请求=》获取到新数据=》替换之前

      this.getRv(id);
      // this.getPlayD(id);
      this.getrelatedVideD(id);
      this.getrelatedMV(id);
    },
    getmv(id) {
      //获取mv地址
      getMvUrl("/mv/url", { id }).then((res) => {
        console.log("url");
        console.log(res);
        this.mvUrl = res.data.url;
      });
    },
    getRv(id) {
      //video/url
      getMvUrl("/video/url", { id }).then((res) => {
        console.log("url");
        console.log(res);
        this.mvUrl = res.urls[0].url;
      });
    },
    getPlayD(id) {
      playDetail("/mv/detail", { mvid: id }).then((res) => {
        console.log(res);
        //获取到需要的数据重新添加到这个对象中
        this.mvDetail = res.data.name;
      });
    },
    //重新获取到一个相关视频详情
    getrelatedVideD(id) {
      playDetail("/video/detail", { id: id }).then((res) => {
        this.mvDetail.name = res.data.name;
        console.log("6666");

        console.log(res);
      });
    },
    //相关视频的
    getrelatedMV(id) {
      relatedMV("/related/allvideo", { id }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          //需要在data中定义变量保存数据
          this.relatedList = res.data;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.playmv {
  position: relative;
  padding: 31.6vh 0 4rem;
  height: 100vh;
  overflow: hidden scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  video {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 31.6vh;
    background-color: #fff;
  }

  .title {
    margin: 30px 0;
    font-weight: 600;
  }
  .foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0.5rem 0;
    background-color: #fff;
    button {
      width: 60%;
      height: 3rem;
      line-height: 3rem;
      background-color: rgb(34, 213, 156);
      color: #fff;
      border-radius: 1.5rem;
    }
  }
}
</style>